<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>毫秒计时器</title>
		<style type="text/css">
			body{margin: 0;}
            .divClass{
                font-size:100px;
                font-weight:800;
                font-family: 'Arial';
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);/**DIV剧中显示（包括top: 50%; left: 50%;）*/
                /*text-align: center;*/
                position:absolute;/**可改变位置*/
                /**text-shadow: 0 0 5px #ff0;字体发光(感觉字体有些模糊所以弃用)*/
            }
            button{
                background-color:#f66f6a;
	            color:white;
	            width: 100px;
	            height: 45px;
	            border:0;
	            font-size: 20px;
	            box-sizing: content-box;				
                border-radius: 5px;
            }
            button:hover{
	            background-color: #a54b4a;
            }
            p{
                position:absolute;
                left:10px;
                font-size:18px;
                /*font-family:'方正大黑简体';*/
            }
            .rotate {transform: rotate(90deg);}/**旋转90度*/
		</style>
	</head>
	<body>
		<script src="../libs/minicomps.min.js"></script>
        <script src="../libs/Unify.js"></script>
        <script src="../libs/TimeFactory.js"></script>
        <div class="divClass" id="prevShow"></div>
        <div class="divClass" id="timeShow"></div>
        <div id="btnContent" style="position:absolute;top:88%;left: 50%;transform: translate(-50%,88%);">
            <button onclick="onBtnClick(1)">横竖切换</button>
            <button onclick="onBtnClick(2)">字体切换</button>
            <button onclick="onBtnClick(3)">主题切换</button>
            <button onclick="onBtnClick(4)">步骤切换</button>
            <button onclick="onBtnClick(5)">请空记录</button>
            <button onclick="onBtnClick(6)">毫秒精度</button>
        </div>
        <p id="timeRecord">空格开始/停止<p>
        <script>
            console.warn(`使用说明：
1.鼠标单击空白处或点键盘上的空格有三个步骤（启动，停止，复原）循环执行
2.键盘按箭头下时变成两步（启动，停止）循环执行，键盘按箭头上时变三步
3.按右边的小键盘数字1,2,3修改计时器字体大小
4.按左边上面的键盘数字1-9修改成不同颜色
5.启动后可按任意键都可停止（这时按空格是停止同时重置计时）
6.按Delete清空所有记录
7.按ArrowLeft修改毫秒是2位或3位数字显示
            `)
            var btnContent=document.getElementById('btnContent');
            var prevShow=document.getElementById('prevShow');
            var timeShow=document.getElementById('timeShow');
            var timeRecord=document.getElementById('timeRecord');
            var colors=[['#000000','#FFFFFF'],['#000000','#FFFFFF'],['#FFFFFF','#000000'],['#57FF60','#004500'],['#FFFFFF','#5B8982'],['#CEC6B6','#45545F'],['#D47655','#E1F8E1'],['#E3927F','#223C5F'],['#F9ECDF','#825855'],['#EDEBE4','#417CA9']]
            var data={};
            var count=1;
            var isLandscape=false;//是否横向
            var averages=[];
            var aveTime=0;
            var isPlay=false;
            var status=0;
            var step=3;
            var showNum=2;
            var [Numpad,Digit]=[{curr:1,total:3},{curr:1,total:colors.length}];
            //console.log(Numpad,Digit);
            if(Unify.isMobile()){//如果在移动端则旋转90度
                //移动端才有按钮出现
                //timeShow.classList.add('rotate');
                //prevShow.classList.remove('rotate');
                //prevShow.className='rotate';
            }else{//PC端
                document.body.removeChild(btnContent);
            }
          
            // timeShow.style.top=(window.innerHeight/2-100)+'px';
            // timeShow.style.left=(window.innerWidth/2-240)+'px';
            // prevShow.style.left=(window.innerWidth/2-310)+'px';
            prevShow.style.top='60px';
            prevShow.style.fontSize='40px';
            window.addEventListener('keydown', keyDownCallBack,true);
            window.addEventListener('keyup', keyUpCallBack,true);
            window.addEventListener('click',onMouseClick);
            function keyDownCallBack(e){
                if(isPlay){
                    onClick();
                }
            }
            function keyUpCallBack(e){
                if(e.code=="Space"){
                    onClick();
                }else if(e.code=='Numpad1'){
                    timeShow.style.fontSize='100px';
                }else if(e.code=='Numpad2'){
                    timeShow.style.fontSize='200px';
                }else if(e.code=='Numpad3'){
                    timeShow.style.fontSize='280px';
                }else if(e.code.includes('Digit')){
                    let color=colors[e.code.split('Digit')[1]];
                    timeShow.style.color=color[0];
                    timeRecord.style.color=color[0];
                    document.body.style.backgroundColor=color[1];
                    prevShow.style.color=timeShow.style.color;
                }else if(e.code=='Delete'){
                    deleteShow();
                }else if(e.code=='ArrowDown'){
                    step=2;
                }else if(e.code=='ArrowUp'){
                    step=3;
                }else if(e.code=='End'){
                    document.body.appendChild(btnContent);
                }else if(e.code=='ArrowLeft'){
                    changeShowNum();
                }
            }
            function startStopTime(){
                isPlay=!isPlay;
               
                if(isPlay){
                    TimeFactory.createUpMillisecond('keyName',0,(data)=>{
                        timeShow.innerHTML=data.show;
                        aveTime=data.value;
                    },showNum);
                }else{
                    TimeFactory.removeTime('keyName');
                    data[count++]=timeShow.innerHTML;
                    averages.push(aveTime);
                    prevShow.innerHTML='最近一次时间：'+timeShow.innerHTML;
                    //console.log(timeShow.innerHTML);
                    let str='';
                    for(let k in data){
                        str+=`[${Unify.numberFormat(k)}] ${data[k]}<br>`;
                    }
                    let [total,len,timeMin]=[0,averages.length,Infinity];
                    for(let i=0;i<len;i++){
                        let t=averages[i];
                        total+=t
                        timeMin=Math.min(t,timeMin);
                    }
                    //console.log(averages,total,len)
                    aveTime=Unify.getMillisecondTimeFormatByNum(Math.floor(total/len),showNum);
                    timeMin=Unify.getMillisecondTimeFormatByNum(Math.floor(timeMin),showNum);
                    str+=`平均:${aveTime}<br>最快:${timeMin}`;
                    timeRecord.innerHTML=str;
                }
            }
            function onMouseClick(e){
                let y=window.innerHeight*0.88;
                if(e.clientY<y){
                    onClick();
                }
            }
            function onClick(){
                status++;
                if(status==1){
                    startStopTime();
                }else if(status==2){
                    startStopTime();
                    if(step==2){
                        status=0;
                    }
                }else{
                    initShow();
                    status=0;
                }
            }
            function onBtnClick(type){
                //console.log(type,isLandscape,Numpad);
                let num=1;
                if(type==1){//方向
                    if(isLandscape){
                        timeShow.classList.remove('rotate');
                        //prevShow.classList.remove('rotate');
                        document.body.appendChild(prevShow);
                    }else{
                        timeShow.classList.add('rotate');
                        //prevShow.classList.add('rotate');
                        document.body.removeChild(prevShow);
                    }
                    isLandscape=!isLandscape
                }else if(type==2){//字体
                    num=++Numpad.curr;
                    keyUpCallBack({code:`Numpad${num}`});
                    if(num==Numpad.total){
                        Numpad.curr=0;
                    }
                }else if(type==3){//主题
                    num=++Digit.curr;
                    keyUpCallBack({code:`Digit${num}`});
                    if(num==Digit.total){
                        Digit.curr=0;
                    }
                }else if(type==4){//步骤
                    step=step==2?3:2;
                }else if(type==5){//清空
                    deleteShow();
                }else if(type==6){//毫秒精度
                    changeShowNum();
                }
            }
            function changeShowNum(){
                showNum=showNum==2?3:2;
            }
            function deleteShow(){
                status=0;
                data={};
                averages=[];
                initShow();
                prevShow.innerHTML='';
                timeRecord.innerHTML='';
            }
            function initShow(){
                timeShow.innerHTML=showNum==2?'00:00.00':'00:00.000';
            }
            initShow();
            
        </script>
    </body>
</html>